<template>
  <view class="wrap">
    <view class="tab_bar">
      <u-tabs
        name="cate_name"
        class="bd t1"
        count="cate_count"
        activeColor="#18C7E2"
        bar-height="0"
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <swiper
      class="scroll-view-height"
      :style="{ height: swiperHeight + 'px' }"
      :current="current"
      :duration="300"
      @animationfinish="animationfinish"
    >
      <swiper-item>
        <scroll-view scroll-y="true" :style="{ height: swiperHeight + 'px' }">
          <view class="bd dbox">
            <view class="s-list" v-if="listnew.length != 0">
              <view
                class="s-item u-border-bottom"
                v-for="(v, index) in listnew"
                :key="index"
                @tap="goDetail(v)"
              >
                <view
                  class="iconfont iconarrow-right u-m-r-20"
                  style="font-size: 40upx; color: #c3c3c3"
                ></view>
                <view
                  style="font-size: 28upx; font-weight: 500; padding: 10upx 0"
                  class="titles u-line-2"
                  >{{ v.title }}</view
                >
                <image
                  :src="v.imgUrl"
                  mode="aspectFit"
                  style="height: 100upx"
                  class="imgs"
                ></image>
              </view>
            </view>
            <view v-else>
              <u-empty
                text="暂无收藏"
                mode="favor"
                class="empty_center_icon"
              ></u-empty>
            </view>
          </view> </scroll-view
        >empty_center_icon
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y="true" :style="{ height: swiperHeight + 'px' }">
          <view class="bd dbox" v-if="likelist.length != 0">
            <view class="s-list">
              <view
                class="s-item u-border-bottom"
                v-for="(v, index) in likelist"
                :key="index"
                @tap="goDetail(v)"
              >
                <view
                  class="iconfont iconarrow-right u-m-r-20"
                  style="font-size: 40upx; color: #c3c3c3"
                ></view>
                <view
                  style="font-size: 28upx; font-weight: 500; padding: 10upx 0"
                  class="titles u-line-2"
                  >{{ v.title }}</view
                >
                <image
                  :src="v.imgUrl"
                  mode="aspectFit"
                  style="height: 100upx"
                  class="imgs"
                ></image>
              </view>
            </view>
          </view>
          <view v-else>
            <u-empty
              text="暂无点赞"
              mode="list"
              class="empty_center_icon"
            ></u-empty>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "我的收藏",
        },
        {
          name: "我的点赞",
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

      tabs: [{}, {}],
      swiperHeight: "",
      page: {},
      listnew: [],
      likelist: [],
    };
  },
  onLoad() {
    this.getInjectPlan();
    this.getLikePlan();
  },
  onShow() {
    this.getInjectPlan();
  },
  onReachBottom() {
    console.log("触底了");
    if (this.page.isLastPage) return;
    this.getInjectPlanMore(this.page.pageNum + 1);
  },

  // onReady() {
  // 	this.getUiStyle()
  // },
  onReady: function (res) {
    var _this = this;
    uni.getSystemInfo({
      success: (resu) => {
        const query = uni.createSelectorQuery();
        //.scroll_y 是滚动区域，得到高度来计算剩余高度
        query.select(".scroll-view-height").boundingClientRect();
        query.exec(function (res) {
          _this.height = resu.windowHeight - res[0].top;
          console.log("打印页面的剩余高度", _this.height);
          _this.swiperHeight = _this.height;
        });
      },
      fail: (res) => {},
    });
  },
  methods: {
    change(index) {
      this.current = index;
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      // this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      // this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      console.log(current);
      if (current == 0) {
        this.getInjectPlan();
      } else {
        this.getLikePlan();
      }
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getInjectPlan(pageNumber) {
      //我的收藏
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/messageEnshrine/getMyEnshrineMessage", {})
        .then((res) => {
          console.log(res);
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.listnew = res.data.data || [];
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getLikePlan(pageNumber) {
      let self = this;
      this.config.post("/thumbs/myEnshrineMessage", {}).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          self.page = res.data.data;
          self.likelist = res.data.data || [];
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // 详情
    goDetail(v) {
      console.log(v);
      if (v.type == 1) {
        uni.navigateTo({
          url:
            "/pages/main/pregnant/message-detail?id=" +
            v.messageId +
            "&title=" +
            v.title +
            "&type=" +
            v.type,
        });
      } else if (v.type == 2) {
        uni.navigateTo({
          url:
            "/pages/main/child/backlog/suggest-detail?id=" +
            v.messageId +
            "&title=" +
            v.title,
        });
        console.log("视频没有详情页");
      } else {
        uni.navigateTo({
          url:
            "/pages/main/child/backlog/suggest-detail?id=" +
            v.messageId +
            "&title=" +
            v.title,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  overflow: hidden;
}
.tab_bar {
  width: 100%;
  position: fixed;
  z-index: 99;
}
.scroll-view-height {
  margin-top: 44rpx;
}

.dbox {
  padding: 30rpx 0;
}
// .s-list {
//   padding: 30upx;
//   width: 100%;
// }
.s-item {
  width: 100%;
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  background-color: white;
  flex-direction: row-reverse;
  .titles {
    width: 260%;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  /* 	page{
		background-color: #1b1c1e !important;
	} */
  .bd {
    background-color: #1b1c1e !important;
  }

  .t1 {
    color: #ccc !important;
  }
}

@media (prefers-color-scheme: light) {
  page {
    background-color: #f7f7f7;
  }
}
</style>
